<template>
    <view class="tabBar">
        <view class="tabList flex-eve">
            <view v-for="(item, index) in tabBarList" :key="index" class="tab-item"
                :class="{ active: currentIndex === index }" @click="goPage(item)">
                <view v-if="index === 2">
                    <view class="tab_logo flex-center">
                        <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/tabLogo.png"></image>
                    </view>
                </view>
                <view class="flex-c-center" v-else>
                    <!-- <image class="tab-icon" :src="'@/static/images/home.png'"></image> -->
                    <image class="tab-icon" :src="getItemIcon(item, index)"></image>
                    <text class="tab-text mt-12">{{ item.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="js">
import { ref, defineProps } from 'vue';
let prop = defineProps(['currentIndex'])
let { currentIndex } = prop
const tabBarList = ref([
    {
        icon: '/static/images/home.png',
        activeIcon: '/static/images/home_act.png',
        text: '首页',
        url: '/pages/home/home'
    },
    {
        icon: '/static/images/video.png',
        activeIcon: '/static/images/video_act.png',
        text: '视频',
        url: '/pages/category/category'

    },
    {
        icon: '/static/images/logo.png',
        activeIcon: '/static/images/logo.png',
        text: '',
        url: '/pages/active/active'

    },
    {
        icon: '/static/images/product.png',
        activeIcon: '/static/images/product_act.png',
        text: '产品',
        url: '/pages/cart/cart'

    },
    {
        icon: '/static/images/mine.png',
        activeIcon: '/static/images/mine_act.png',
        text: '我的',
        url: '/pages/mine/mine'

    }
]);
const goPage=(item)=>{
    uni.reLaunch({url:item.url})
}
const switchTab = (index) => {
    currentIndex.value = index;

};
const getItemIcon = (item, index) => {
    if (index == currentIndex) {
        return item.activeIcon;
    } else {
        return item.icon;
    }


};
</script>
<style lang="scss" scoped>
.tabBar {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    width: 100%;
    height: 166rpx;
    background: #f8f8f8;

    .tabList {
        width: 750rpx;
        height: 98rpx;
        // background: #f8f8f8;
        border-radius: 4rpx 4rpx 4rpx 4rpx;

        // border: 2rpx solid red;
        .tab-item {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .tab-icon {
            width: 48rpx;
            height: 48rpx;
        }

        .tab_logo {
            width: 100rpx;
            height: 72rpx;
            // background: #333333;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            font-family: 'DIN COROS';
            font-weight: 400;
            font-size: 38rpx;
            color: #dbf046;
        }

        .tab-text {
            font-weight: 800;
            font-size: 20rpx;
            color: #999999;
            line-height: 0rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}
</style>